package com.example.app.pages.main.home.accountList

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.app.components.MyDivider.MyDivider
import com.example.app.components.MyDivider.MyDividerDirection
import com.example.app.components.MyListItem.MyListItem
import com.example.app.components.MyText.MyText
import com.example.app.ui.theme.my_description_color
import com.example.app.ui.theme.shapeLarge

@Composable
fun AccountListTopItem(
        expenditureMonthlyBudgetedHeight: Dp
) {
    MyListItem(
        hasWrap = true,
        headlineContent = {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(expenditureMonthlyBudgetedHeight)
            ) {
                Row(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        MyText(text = "支出月预算")
                    }
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        MyText(
                            text = "超支",
                            style = MaterialTheme.typography.bodySmall.copy(
                                color = MaterialTheme.colorScheme.primary
                            )
                        )
                        MyText(text = "1481.00")
                    }
                }
                MyDivider(
                    myDividerDirection = MyDividerDirection.HOR,
                    modifier = Modifier
                        .clip(RoundedCornerShape(2.dp))
                        .fillMaxWidth()
                        .height(4.dp)
                        .background(MaterialTheme.colorScheme.primary.copy(alpha = .7f))
                )
                Row(
                    modifier = Modifier.weight(1f),
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        MyText(
                            text = "总",
                            style = MaterialTheme.typography.bodySmall.copy(
                                color = my_description_color
                            )
                        )
                        MyText(
                            text = "800.00",
                            style = MaterialTheme.typography.bodySmall.copy(
                                color = my_description_color
                            )
                        )
                    }
                }
            }
        }
    )
}